<template>
  <view class="template-login">

    <view class="login">
      <!-- 顶部背景图片-->
      <view class="login__bg login__bg--top">
        <image class="bg" src="https://img.flya.top/img/login-top2.png" mode="widthFix"></image>
      </view>

      <view class="login__wrapper">
        <view class="tn-margin-left tn-margin-right tn-text-bold" style="font-size: 60rpx;">
          吃谷呀
        </view>
        <view class="tn-margin tn-color-gray--disabled tn-text-lg">
          谷，让生活更美好
        </view>


        <!-- 输入框内容-->
        <view class="login__info tn-flex tn-flex-direction-column tn-flex-col-center tn-flex-row-center">
          <!-- 登录 -->
          <block >
            <view class="login__info__item__input tn-flex tn-flex-direction-row tn-flex-nowrap tn-flex-col-center tn-flex-row-left">
              <view class="login__info__item__input__left-icon">
                <view class="tn-icon-phone"></view>
              </view>
              <view class="login__info__item__input__content">
                <input maxlength="20" placeholder-class="input-placeholder" placeholder="请输入账号" v-model="formData.account"/>
              </view>
            </view>

            <view class="login__info__item__input tn-flex tn-flex-direction-row tn-flex-nowrap tn-flex-col-center tn-flex-row-left">
              <view class="login__info__item__input__left-icon">
                <view class="tn-icon-safe"></view>
              </view>
              <view class="login__info__item__input__content login__info__item__input__content--verify-code">
                <input placeholder-class="input-placeholder" placeholder="请输入密码" v-model="formData.password"  password/>
              </view>
            </view>
          </block>
          <!-- 注册 -->

          <view class="login__info__item__button tn-bg-blue tn-color-white" hover-class="tn-hover" :hover-stay-time="150"
                @click="login"
          >一键登录</view>


        </view>


        <!-- 底部背景图片-->
        <view class="login__bg login__bg--bottom">
          <image src="https://img.flya.top/img/login-bottom2.png" mode="widthFix"></image>
        </view>

      </view>


    </view>
  </view>
</template>

<script>
import {login} from "@/api/login";

export default {
  name: 'login',
  data() {
    return {
      formData:{
        account:'fl1906',
        password:'12345678'
      }
    }
  },
  watch: {

  },
  methods: {
    checkAccountAndPwd(){
      if(this.formData.account === ''){
        uni.showToast({
          title: '请输入账号',
          icon: 'none'
        })
        return false
      }
      if(this.formData.password === ''){
        uni.showToast({
          title: '请输入密码',
          icon: 'none'
        })
        return false
      }
      return true
    },

    login(){
      if(this.checkAccountAndPwd()){
        login(this.formData).then(res => {
          if(res.code === 200){
            console.log(res.data)
            uni.setStorageSync('tokenValue', res.data.tokenValue)
            uni.setStorageSync('userInfo', res.data)
            console.log(res.data.tokenValue)
            uni.switchTab({
              url: '/pages/index/index'
            })
          }
        })
      }

    }

  }
}
</script>

<style lang="scss" scoped>
@import '@/static/css/templatePage/custom_nav_bar.scss';
/* 悬浮 */
/* .login-sussuspension{
  animation: suspension 3s ease-in-out infinite;
}

@keyframes suspension {
  0%, 100% {
    transform: translate(0 , 0);
  }
  50% {
    transform: translate(0rem , 1rem);
  }
} */

.login {
  position: relative;
  height: 100%;
  z-index: 1;

  /* 背景图片 start */
  &__bg {
    z-index: -1;
    position: fixed;

    &--top {
      top: 0;
      left: 0;
      right: 0;
      width: 100%;

      .bg {
        width: 750rpx;
        will-change: transform;
      }
    }

    &--bottom {
      bottom: -10rpx;
      left: 0;
      right: 0;
      width: 100%;
      // height: 144px;
      margin-bottom: env(safe-area-inset-bottom);

      image {
        width: 750rpx;
        will-change: transform;
      }
    }
  }
  /* 背景图片 end */

  /* 内容 start */
  &__wrapper {
    margin-top: 300rpx;
    width: 100%;
  }

  /* 切换 start */
  &__mode {
    position: relative;
    margin: 0 auto;
    width: 476rpx;
    height: 77rpx;
    margin-top: 100rpx;
    background-color: rgba(255,255,255,0.6);
    box-shadow: 0rpx 10rpx 50rpx 0rpx rgba(0, 3, 72, 0.1);
    border-radius: 39rpx;

    &__item {
      height: 77rpx;
      width: 100%;
      line-height: 77rpx;
      text-align: center;
      font-size: 31rpx;
      color: #080808;
      letter-spacing: 1em;
      text-indent: 1em;
      z-index: 2;
      transition: all 0.4s;

      &--active {
        font-weight: bold;
        color: #FFFFFF;
      }
    }

    &__slider {
      position: absolute;
      height: inherit;
      width: calc(476rpx / 2);
      border-radius: inherit;
      box-shadow: 0rpx 18rpx 72rpx 18rpx rgba(0, 195, 255, 0.1);
      z-index: 1;
      transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    }
  }
  /* 切换 end */

  /* 登录注册信息 start */
  &__info {
    margin: 80rpx 30rpx 10rpx 30rpx;
    padding-bottom: 0;
    border-radius: 20rpx;

    &__item {

      &__input {
        margin-top: 59rpx;
        width: 100%;
        height: 77rpx;
        border: 1rpx solid #E6E6E6;
        border-radius: 39rpx;

        &__left-icon {
          width: 10%;
          font-size: 44rpx;
          margin-left: 20rpx;
          color: #838383;
        }

        &__content {
          width: 80%;
          padding-left: 10rpx;

          &--verify-code {
            width: 56%;
          }

          input {
            font-size: 24rpx;
            // letter-spacing: 0.1em;
          }
        }

        &__right-icon {
          width: 10%;
          font-size: 44rpx;
          margin-right: 20rpx;
          color: #838383;
        }

        &__right-verify-code {
          width: 34%;
          margin-right: 20rpx;
        }
      }

      &__button {
        margin-top: 75rpx;
        margin-bottom: 39rpx;
        width: 100%;
        height: 77rpx;
        text-align: center;
        font-size: 31rpx;
        font-weight: bold;
        line-height: 77rpx;
        letter-spacing: 1em;
        text-indent: 1em;
        border-radius: 39rpx;
        box-shadow: 1rpx 10rpx 24rpx 0rpx rgba(60, 129, 254, 0.35);
      }

      &__tips {
        margin: 30rpx 0;
        color: #AAAAAA;
      }
    }
  }
  /* 登录注册信息 end */

  /* 登录方式切换 start */
  &__way {
    margin: 0 auto;
    margin-top: 110rpx;

    &__item {
      &--icon {
        width: 85rpx;
        height: 85rpx;
        font-size: 80rpx;
        // border-radius: 100rpx;
        margin-bottom: 18rpx;
        position: relative;
        z-index: 1;


      }
    }
  }
  /* 登录方式切换 end */
  /* 内容 end */

}

/deep/.input-placeholder {
  font-size: 24rpx;
  color: #838383;
}

</style>
